<template>
  <div class="merchant-layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">
        <router-link to="/">校园外卖平台</router-link>
      </div>
      <div class="header-right">
        <el-dropdown trigger="click" @command="handleCommand">
          <span class="el-dropdown-link">
            {{ merchantName }} <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="profile">店铺信息</el-dropdown-item>
            <el-dropdown-item command="userCenter">用户中心</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>
    
    <el-container class="main-container">
      <!-- 侧边导航栏 -->
      <el-aside width="220px" class="aside">
        <el-menu
          :default-active="activeMenu"
          router
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          class="menu">
          <el-menu-item index="/merchant/dashboard">
            <i class="el-icon-s-home"></i>
            <span slot="title">商家首页</span>
          </el-menu-item>
          
          <el-menu-item index="/merchant/foods">
            <i class="el-icon-dish"></i>
            <span slot="title">菜品管理</span>
          </el-menu-item>
          
          <el-menu-item index="/merchant/orders">
            <i class="el-icon-s-order"></i>
            <span slot="title">订单管理</span>
          </el-menu-item>
          
          <!-- <el-menu-item index="/merchant/promotions">
            <i class="el-icon-shopping-cart-full"></i>
            <span slot="title">营销活动</span>
          </el-menu-item> -->
          
          <el-menu-item index="/merchant/reviews">
            <i class="el-icon-chat-line-square"></i>
            <span slot="title">评价管理</span>
          </el-menu-item>
          
          <el-menu-item index="/merchant/statistics">
            <i class="el-icon-data-line"></i>
            <span slot="title">统计分析</span>
          </el-menu-item>
          
          <el-menu-item index="/merchant/profile">
            <i class="el-icon-setting"></i>
            <span slot="title">店铺信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      
      <!-- 内容区域 -->
      <el-main class="main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import axios from 'axios'
import { mapState, mapActions } from 'vuex'
import { getMerchantByUserId, updateBusinessStatus } from '@/api/merchant'

export default {
  name: 'MerchantLayout',
  data() {
    return {
      isCollapse: false,
      merchantId: null,
      merchantName: '',
      businessStatus: 1 // 默认营业中
    }
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    activeMenu() {
      return this.$route.path
    }
  },
  created() {
    this.getMerchantInfo()
  },
  methods: {
    ...mapActions(['logout']),
    getMerchantInfo() {
      getMerchantByUserId(this.user.id)
        .then(response => {
          if (response.code === 200) {
            this.merchantId = response.data.id
            this.merchantName = response.data.shopName
            this.businessStatus = response.data.businessStatus
          } else {
            this.$message.error(response.message || '获取商家信息失败')
          }
        })
        .catch(error => {
          console.error('获取商家信息失败', error)
          this.$message.error('获取商家信息失败')
        })
    },
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.handleLogout()
      } else if (command === 'profile') {
        this.$router.push('/merchant/profile')
      } else if (command === 'businessStatus') {
        this.toggleBusinessStatus()
      } else if (command === 'userCenter') {
        this.$router.push('/user/info')
      }
    },
    toggleBusinessStatus() {
      const newStatus = this.businessStatus === 1 ? 0 : 1
      const statusText = newStatus === 1 ? '营业中' : '休息中'
      
      updateBusinessStatus(this.merchantId, newStatus)
        .then(response => {
          if (response.code === 200) {
            this.businessStatus = newStatus
            this.$message.success(`已切换为${statusText}`)
          } else {
            this.$message.error(response.message || '更新营业状态失败')
          }
        })
        .catch(error => {
          console.error('更新营业状态失败', error)
          this.$message.error('更新营业状态失败')
        })
    },
    handleLogout() {
      this.logout()
        .then(() => {
          this.$router.push('/login')
        })
        .catch(error => {
          console.error('退出登录失败', error)
        })
    }
  }
}
</script>

<style scoped>
.merchant-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  line-height: 60px;
}

.logo {
  font-size: 20px;
  font-weight: bold;
}

.logo a {
  text-decoration: none;
  color: #303133;
}

.header-right {
  display: flex;
  align-items: center;
}

.el-dropdown-link {
  cursor: pointer;
  color: #606266;
}

.main-container {
  flex: 1;
  background-color: #f0f2f5;
}

.aside {
  background-color: #304156;
  height: calc(100vh - 60px);
  overflow-y: auto;
  transition: width 0.3s;
}

.menu {
  border-right: none;
  height: 100%;
}

.main {
  padding: 20px;
  overflow-y: auto;
  background-color: #f0f2f5;
}

/* 响应式 */
@media (max-width: 768px) {
  .aside {
    width: 64px !important;
  }
  
  .el-menu--collapse {
    width: 64px !important;
  }
}
</style> 